<template>
    <div>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-row>
					<el-form-item label="菜单名" prop="menuName">
						<el-input v-model="ruleForm.MenuName" placeholder="请输入菜单名"></el-input>
					</el-form-item>
                    
					<el-form-item label="是否拥有上级" prop="Status">
						<el-switch v-model="pState" ></el-switch>
					</el-form-item>

					<el-form-item label="网址" prop="url">
						<el-input v-model="ruleForm.Url" :disabled="!pState" placeholder="请输入网址"></el-input>
					</el-form-item>
                    
					<el-form-item label="上级菜单" prop="parentID">
						<el-select v-model="ruleForm.ParentID" :disabled="!pState" placeholder="请选择上级菜单" >
							<el-option v-for="(item, index) in parent" :key="index" :label="item.MenuName"
								:value="item.MenuID"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('ruleForm')">修改菜单</el-button>
						<el-button @click="resetForm('ruleForm')">重置</el-button>
					</el-form-item>
			</el-row>
		</el-form>
    </div>
</template>

<script>
// import { turn } from 'core-js/core/array';


export default {
	name: "edit",
    data() {
        return {
			parent: [],
            pState:true,
            ruleForm:{},
			rules: {
				MenuName: [
					{
						required: true,
						message: "请输入菜单名",
						trigger: "blur",
					}
                ],
				parentID: [
					{
						required: this.pState,
						message: "请选择上级菜单",
						trigger: "blur",
					}
                ]
            }
        }
    },
	model: {
    prop: "dialogFormVisible",
    event: "change",
  },
  props: {
        dialogFormVisible: Boolean,
        data: Object,
    },
    methods:{
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
                    if(!this.pState){
                        this.ruleForm.parentID=0;
						this.ruleForm.url='';
                    }
					this.axios({
						method: 'Put',
						url: 'Menus/5',
						data: JSON.stringify(this.ruleForm),
						headers: {
							Authorization: sessionStorage.getItem('token'),
							'Content-Type': 'application/json'
						}
					}).then(res => {
						if (res.data.msg == '菜单更改成功！') {
							this.$notify({
								title: '成功',
								message: res.data.msg,
								type: 'success'
							});
							///* 改变父窗口的值来关闭弹窗 */
							//this.$emit('update:dialogVisible', false);
							// 触发刷新
							this.$emit('refresh')

							this.$emit("change", false);
						} else {
							this.$notify.error({
								title: '错误',
								message: res.data.msg
							});
						}
					}).catch(err => {
						console.log('err: ', err);
					})
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		//重置表单
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}

    },
	watch: {
        dialogFormVisible(v) {
            if (v) this.ruleForm = JSON.parse(JSON.stringify(this.data));
            console.log(this.ruleForm);
		if(this.ruleForm.ParentID==0){
			this.ruleForm.ParentID=null
			this.pState=false;
		}else{
			this.pState=true;
		}
        }
    },
	created() {
		this.ruleForm = JSON.parse(JSON.stringify(this.data));
		console.log(this.ruleForm)
		if(this.ruleForm.ParentID==0){
			this.ruleForm.ParentID=null
			this.pState=false;
		}else{
			this.pState=true;
		}
		this.axios({
			method: "get",
			url: "Menus/GetParent",
			headers: {
				Authorization: sessionStorage.getItem("token"),
			},
		}).then((res) => {
			this.parent = res.data;
			this.ruleForm.ParentID = this.parent[0].parentID;
		});
	}
}
</script>

<style scoped>
</style>